<script setup>
import {reactive, ref} from 'vue'
import axios from "axios";
import {ElMessage} from "element-plus";

const HealthStaticsVisible = ref(false);

const course_options = ref([]);

const selectCids = ref([]
)

const cidToCnameMap = ref(new Map());

const courses = reactive({
  data: [],
})


const users = reactive({
  data: [],
})

const healthData = reactive({
  data: [],
})

const loadUsers = () => {
  console.log("selectCids", selectCids);
  users.data = [];
  if (!(selectCids.value.length === 0)) {
    for (var i = 0; i < selectCids.value.length; i++) {
      loadUser(selectCids.value[i]);
    }
  }
}

const loadUser = (cid) => {
  console.log("cid", cid);
  console.log("map", cidToCnameMap);
  const cname = cidToCnameMap.value.get(cid);
  console.log("cname", cname);
  axios.get('http://localhost:8080/v1/coach/enrollment/list?cid=' + cid).then((response) => {
    if (response.data.state === 2001) {
      console.log("loadUser success");
      const datas = response.data.data;
      for (var i = 0; i < datas.length; i++) {
        datas[i].cname = cname;
        users.data.push(datas[i])
      }
      console.log("users", users);
    } else {
      console.log("loadUser failed");
    }
  })
}

const showHealthStatics = (index, data)=>{
  const uid = data.uid;
  axios.get('http://localhost:8080/v1/coach/enrollment/health?uid=' + uid).then((response) => {
    if(response.data.state === 2001){
      console.log("查找health成功")
      const newdata = response.data.data;
      newdata.uname = data.uname;
      healthData.data.push(response.data.data);
      console.log("healthData", healthData);
    }else {
      console.log("查找health失败")
    }
  });
  HealthStaticsVisible.value = true;
}

const closeHealthStatics = () => {
  healthData.data = [];
}
const load = () => {
  const eid = localStorage.getItem('eid');
  axios.get('http://localhost:8080/v1/coach/course/list?eid=' + eid).then((response) => {
    if (response.data.state === 2001) {
      courses.data = response.data.data;
      console.log(courses);
      course_options.value = courses.data.map(datas => ({
        value: datas.cid,
        label: datas.cname
      }));
      cidToCnameMap.value = new Map(courses.data.map(course => [course.cid, course.cname]));
      console.log("courseoption", course_options);
    }
  });
}

load();
</script>

<template>
  <div class="bg">
    <el-container>
      <el-header>
        <el-text size="large" tag="b">我的学员</el-text>
        <hr>
      </el-header>
    </el-container>
    <el-container>
      <el-aside width="300px">
        <el-card shadow="always" width="100%" style="background-color: rgba(0,0,0,0);border: 0">
          <el-form label-position="left">
            <el-form-item label="课程">
              <el-select-v2
                  v-model="selectCids"
                  :options="course_options"
                  placeholder="选择课程"
                  style="width: 200px; vertical-align: middle;color: black"
                  multiple
                  clearable
              />
            </el-form-item>
          </el-form>
          <el-button type="primary" @click="loadUsers">查询</el-button>
        </el-card>
      </el-aside>
      <el-main>
        <el-card shadow="always" width="100%" style="background-color: rgba(0,0,0,0);border: 0">
          <el-table :data="users.data" style="width: 100%" border height="250">
            <el-table-column prop="cname" label="课程" width="200"></el-table-column>
            <el-table-column prop="uname" label="姓名" width="100"></el-table-column>
            <el-table-column prop="right" label="健康状况">
              <template #default="scope">
                <el-button link type="primary" size="small" @click="showHealthStatics(scope.$index,scope.row)">
                  查看健康状况
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
        <el-dialog
            v-model="HealthStaticsVisible"
            title="健康状况"
            width="50%"
            @close="closeHealthStatics"
        >
          <template #default>
          <el-card shadow="always" width="100%">
            <el-table :data="healthData.data" style="width: 80%" label="健康状况">
              <el-table-column prop="uname" label="姓名" width="100"></el-table-column>
              <el-table-column prop="height" label="身高" width="100"></el-table-column>
              <el-table-column prop="weight" label="体重" width="100"></el-table-column>
              <el-table-column prop="bfp" label="BFP" width="100"></el-table-column>
              <el-table-column prop="bm" label="BM" width="100"></el-table-column>
              <el-table-column prop="mm" label="MM" width="100"></el-table-column>
            </el-table>
          </el-card>
          </template>
        </el-dialog>
      </el-main>
    </el-container>
  </div>
</template>

<style scoped>
.bg {
  color: black;
  text-align: center;
  margin: 0;
  padding: 0;
}

.operate_button {
  margin-bottom: 10px;
}
</style>